<template>
  <div>

    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20">
  <el-col :span="5">
    <div class="grid-content bg-purple"> 
      <el-form-item label="订单号">
        <el-input v-model="form.orderNum"></el-input>
      </el-form-item>
    </div></el-col>
  <el-col :span="5" :offset="6">
    <div class="grid-content bg-purple">
      <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </div>
  </el-col>
</el-row>
    </el-form>

    <el-table
    v-loading="loading" 
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="orderNum"
      label="订单号">
    </el-table-column>
    
    <el-table-column
      prop="userName"
      label="客户名称">
    </el-table-column>
    
    <el-table-column
      prop="userPhone"
      label="联系电话">
    </el-table-column>
    
    <el-table-column
      prop="chargeQuantity"
      label="充电电量">
    </el-table-column>
    
    <el-table-column
      prop="chargingDuration"
      label="充电时长">
    </el-table-column>
    
    <el-table-column
      prop="money"
      label="金额">
    </el-table-column>
    
    <el-table-column
      prop="paymentMethod"
      label="支付方式">
    </el-table-column>

    <el-table-column
      prop="vtype"
      label="充电类别">
    </el-table-column>

    <el-table-column
      prop="stationLocation"
      label="所在充电站">
    </el-table-column>

    <el-table-column
      prop="chargeCode"
      label="充电桩编号">
    </el-table-column>

    <el-table-column
      prop="chargerNum"
      label="充电枪号">
  </el-table-column>
    
    <el-table-column prop="recordStatus" label="交易状态">
        <template slot-scope="scope">
          {{ scope.row.rechargeStatus == 0 ? "充电中" : "已结束" }}
        </template>
      </el-table-column>
    <el-table-column
      label="操作"
      width="100">
      <template ><!-- slot-scope="scope" -->
        <!-- <el-button @click="show(scope.row.id)" type="text" size="small">查看</el-button> -->
         <el-button>查看</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
import { record } from '@/api/order/records.js';
export default {

  data(){
    return{
      loading:false,
      tableData:[],
      pageNum:1,
      pageSize:2,
      total:0,
      form:{},
    }
  },
  methods:{
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.onSubmit();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.onSubmit();
      },
      
      onSubmit:function() {
        this.loading = true;
        record(this.pageNum, this.pageSize, this.form).then(res => {
          this.tableData = res.records;
        this.total = res.total;
        this.loading = false;
  })
},
  },
  created(){
    this.onSubmit();
  }

}
</script>

<style>

</style>